import { useRef, useState } from "react"



export default function Controll() {

  const [value, setValue] = useState('')

  return (
    <div>
      <h1>受控组件 表单组件 受react的state管理</h1>
      <input type="text" value={value} onChange={e => setValue(e.target.value)} />
      <div>value: {value}</div>
      <Uncontroll />
    </div>
  )
}

const Uncontroll = () => {

  const [value, setValue] = useState('')

  const ref = useRef<HTMLInputElement>(null)

  const handleClick = () => {
    // setValue(ref.current?.value || '')
    console.log(ref.current?.value);
    
  }

  return (
    <>
      <h1>非受控组件</h1>
      <input onChange={handleClick} defaultValue={value} type="text" ref={ref} />
      <div>value: {ref.current?.value}</div>
    </>
  )
}